<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>
</head>
<body >
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>{{ age }}</h1>


        <!--
            vue 中绑定事件   v-on:事件名  简化写法===>  @事件名
        -->
        <input type="button" value="点我改变年龄" @click="changeAge" >
    </div>
</body>
</html>
<!--引入vue js文件-->
<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//指定vue实例作用范围,
        data:{    //用来给vue实例定义数据
            msg:"hello vue",
            age:23
        },
        methods:{
            /*changeAge:function(){ //定义事件 简化写法 ecmascript 5
                this.age++;
            }*/
            changeAge(){ //es6语法 ecmascript 6版本
                this.age++;
            }
        }
    });
</script>